<template>
  <view class="container">
    <view class="instructions-list">
      <view class="instruction-item">
        <!-- 	<navigator url="" class="item" hover-class="none">
					<view class="instruction-item-view" @click="openPdf('notes')">1.宿舍入住指引说明</view>
				</navigator>
				<navigator url="" class="item" hover-class="none">
					<view class="instruction-item-view" @click="openPdf('hotWater')">2.热水使用说明</view>
				</navigator>
				<navigator url="" class="item" hover-class="none">
					<view class="instruction-item-view" @click="openPdf('electricity')">3.电费充值说明</view>
				</navigator>
				<navigator url="" class="item" hover-class="none">
					<view class="instruction-item-view" @click="openPdf('water')">4.冷水充值说明</view>
				</navigator>
				<navigator url="" class="item" hover-class="none">
					<view class="instruction-item-view" @click="openPdf('repair')">5.报修服务说明</view>
				</navigator> -->
        <navigator url="" class="item" hover-class="none">
          <view class="instruction-item-view" @click="openPdf('electricity')">12座学生公寓线上电费充值操作指引</view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        pdfUrls: {
          hotWater: 'https://shop.flowergk.com/images/%E7%83%AD%E6%B0%B4%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E.pdf',
          electricity: 'https://shop.flowergk.com/images/%E7%94%B5%E8%B4%B9%E5%85%85%E5%80%BC%E8%AF%B4%E6%98%8E.pdf',
          water: 'https://shop.flowergk.com/images/%E5%86%B7%E6%B0%B4%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E.pdf',
          notes: 'https://shop.flowergk.com/images/%E5%AE%BF%E8%88%8D%E5%85%A5%E4%BD%8F%E6%8C%87%E5%BC%95%E8%AF%B4%E6%98%8E.pdf',
          repair: 'https://shop.flowergk.com/images/%E6%8A%A5%E4%BF%AE%E6%9C%8D%E5%8A%A1%E8%AF%B4%E6%98%8E.pdf'
        }
      }
    },
    methods: {
      openPdf(type) {
        const url = this.pdfUrls[type];
        if (!url) {
          uni.showToast({
            title: '文档链接不存在',
            icon: 'none'
          });
          return;
        }

        uni.showLoading({
          title: '加载中',
        });

        uni.downloadFile({
          url: url,
          success: (res) => {
            if (res.statusCode === 200) {
              uni.hideLoading();
              uni.openDocument({
                filePath: res.tempFilePath,
                success: function(res) {
                  console.log('打开文档成功');
                },
                fail: function(err) {
                  console.log('打开文档失败', err);
                  uni.showToast({
                    title: '打开文档失败',
                    icon: 'none'
                  });
                }
              });
            }
          },
          fail: (err) => {
            uni.hideLoading();
            console.log('下载文档失败', err);
            uni.showToast({
              title: '下载文档失败',
              icon: 'none'
            });
          }
        });
      }
    }
  }
</script>

<style>
  uni-page-body {
    background-color: #ededed;
  }

  .container {
    width: 100%;
    height: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333333;
  }

  .header {
    margin-bottom: 20px;
  }

  .title {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
  }

  .company-info {
    font-size: 14px;
    color: #666666;
  }

  .welcome-message {
    width: 85%;
    font-size: 16px;
    color: #333333;
    margin-bottom: 50px;
    word-wrap: break-word;
    word-break: break-all;
  }

  .instructions-list {
    width: 100%;
  }

  .instruction-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 16px;
    color: #333333;
    font-size: 18px;
    background-color: white;
  }

  .instruction-item-view {
    margin-top: 20px;
    height: 5vh;
    color: white;
    background-color: #2ba245;
    border-bottom: 1px solid #ccc;
    padding-left: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 15px;
  }
</style>